<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="editProduct">新建房间</el-button>
			</div>
			<el-row :gutter="20">
				<div style="margin:0 20px;">
					<el-form-item label="使用状态">
						<el-select v-model="queryParams.state" placeholder="请选择" clearable size="small">
							<el-option v-for="(item, index) in stateOptions" :key="index" :label="item.fullName"
								:value="item.id" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="编号">
						<el-input v-model="queryParams.name" clearable size="small" />
					</el-form-item>
				</div>
			</el-row>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column prop="name" label="完整编号" align="center" width="150" />
			<el-table-column prop="blockName" label="小区" align="center">
				<template slot-scope="scope">{{ scope.row.blockName }}</template>
			</el-table-column>
			<el-table-column prop="buildingName" label="楼栋" align="left">
				<template slot-scope="scope">{{ scope.row.buildingName }}</template>
			</el-table-column>
			<el-table-column prop="floor" label="楼层" align="center" />
			<el-table-column prop="code" label="门牌号" align="center" />
			<el-table-column prop="buildingSquare" label="占地面积" align="center" />
			<!-- <el-table-column prop="useSquare" label="使用面积" align="center" /> -->
			<el-table-column prop="rentFee" label="租金" align="center" width="120" />
			<el-table-column prop="nameUnit" label="单元" align="center" />
			<el-table-column prop="dateCheckIn" label="入住时间" align="center" width="150" />
			<!-- 		<el-table-column prop="numPopulation" label="常住人口" align="left" />
			<el-table-column prop="numOld" label="高龄老人" align="center" /> -->
			<el-table-column prop="numPregnant" label="孕妇数量" align="center" />
			<el-table-column prop="userName" label="业主姓名" align="center" />
			<el-table-column prop="tyyp" label="类型" align="center" />
			<el-table-column prop="idcard" label="身份证号码" align="center" width="300" />
			<el-table-column prop="phonenumber" label="联系方式" align="center" width="200" />
			<el-table-column prop="ecp" label="紧急人联系方式" align="center" width="200" />
			<el-table-column label="使用状态" prop="state" algin="center">
				<template slot-scope="scope">
					{{ scope.row.state}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="200" fixed="right">
				<template slot-scope="scope">
					<div class="centered-content">
						<el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)">
							编辑
						</el-button>
						<el-button type="text" size="mini" class="deleteBtn" @click="delProduct(scope.row)">
							删除
						</el-button>
						<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
							详情
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 楼维护弹窗 -->
		<el-dialog title="房间维护" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
			width="35%">
			<el-form ref="form" :model="dataForm" :rules="rules" label-width="80px" :disabled="canEdit">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="楼栋" prop="building">
							<el-select v-model="dataForm.block">
								<el-option v-for="item in buildings" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="门牌号" prop="code">
							<el-input v-model="dataForm.code" placeholder="请输入门牌号" :maxlength="49" clearable
								:style="{ width: '100%' }" @input="/^\d+(.\d{1,2})?$/.test(dataForm.code)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="楼层" prop="floor">
							<el-input v-model="dataForm.floor" placeholder="请输入楼层" clearable :style="{ width: '100%' }"
								:maxlength="7" @input="/^\d+(.\d{1,2})?$/.test(dataForm.floor)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="占地面积" prop="buildingSquare">
							<el-input v-model="dataForm.buildingSquare" placeholder="建筑面积" clearable
								:style="{ width: '100%' }" :maxlength="10"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.buildingSquare)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="使用面积" prop="useSquare">
							<el-input v-model="dataForm.useSquare" placeholder="使用面积" clearable
								:style="{ width: '100%' }" :maxlength="10"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.useSquare)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="单元" prop="nameUnit">
							<el-input v-model="dataForm.nameUnit" placeholder="请输入单元" clearable
								:style="{ width: '100%' }" :maxlength="10"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.nameUnit)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="入住时间" prop="dateCheckIn">
							<el-date-picker v-model="dataForm.dateCheckIn" placeholder="请选择" clearable
								:style="{ width: '100%' }" type="date" format="yyyy-MM-dd"
								value-format="timestamp"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="类型" prop="typ">
							<el-select v-model="dataForm.typ" clearable>
								<el-option label="住宅" value="住宅"></el-option>
								<el-option label="商铺" value="商铺"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="业主姓名" prop="userName">
							<el-input v-model="dataForm.userName" placeholder="请输入业主姓名" :disabled="editInhibit"
								clearable :style="{ width: '100%' }" :maxlength="10"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系方式" prop="phonenumber">
							<el-input v-model="dataForm.phonenumber" placeholder="请输入联系方式" :disabled="editInhibit"
								clearable :style="{ width: '100%' }" :maxlength="11"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="常住人口" prop="numPopulation">
							<el-input v-model="dataForm.numPopulation" placeholder="请输入常住人口" clearable
								:style="{ width: '100%' }" :maxlength="10"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.numPopulation)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="高龄老人" prop="numOld">
							<el-input v-model="dataForm.numOld" placeholder="请输入高龄老人" clearable
								:style="{ width: '100%' }" :maxlength="10"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.numOld)"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="孕妇数量" prop="numPregnant">
							<el-input v-model="dataForm.numPregnant" placeholder="请输入数量" clearable
								:style="{ width: '100%' }" :maxlength="10"
								@input="/^\d+(.\d{1,2})?$/.test(dataForm.numPregnant)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="使用状态" prop="state">
							<el-select v-model="dataForm.state" placeholder="请选择" clearable :style="{ width: '100%' }"
								:multiple="false">
								<el-option v-for="(item, index) in stateOptions" :key="index" :label="item.fullName"
									:value="item.id" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" placeholder="请输入" :maxlength="200" :style="{ width: '100%' }"
						true type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer" v-if="!canEdit">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 上传文件
	import {
		selectConfigHouseBlock,
		insertConfigHouseBlock,
		editConfigHouseBlock,
		deleteConfigHouseBlock,
		selectBuildingBlock
	} from '@/api/wuye.js'
	import fileUpdata from '@/api/file.config'
	export default {
		name: "product",
		// 页面数据
		data() {
			return {
				areaOptions: [],
				editInhibit: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					block: null,
					name: null,
					number: null,
				},
				rules: {
					block: [{
						required: true,
						message: '请选择楼栋',
						trigger: 'blur',
					}, ],
					typ: [{
						required: true,
						message: '请选择类型',
						trigger: 'blur',
					}, ],
					code: [{
						required: true,
						message: '请输入门牌号',
						trigger: 'blur',
					}, ],
					floor: [{
							required: true,
							message: '请输入楼层',
							trigger: 'blur',
						},
						{
							pattern: /^[1-9]{1}[0-9]*$/,
							message: '格式不正确',
							trigger: 'blur',
						},
					],
					rentFee: [{
							pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})?$/,
							message: '请输入正确的数字，最多两位小数',
							trigger: 'blur',
						},
						{
							pattern: /^(([1-9]{1}\d{0,7})|(0{1}))(\.\d{0,2})?$/,
							message: '小数点前最多8位数字',
							trigger: 'blur',
						},
					],
					buildingSquare: [{
							required: true,
							message: '建筑面积',
							trigger: 'blur',
						},
						// {
						// 	min: 0,
						// 	max: 99999999,
						// 	message: '建筑面积要大于0小于99999999',
						// 	trigger: 'blur',
						// },
						{
							pattern: /^(([1-9]{1}\d{0,7})|(0{1}))(\.\d{0,2})?$/,
							message: '小数点前最多8位数字',
							trigger: 'blur',
						},
					],
					useSquare: [{
							required: true,
							message: '使用面积',
							trigger: 'blur',
						},
						{
							pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})?$/,
							message: '请输入正确的数字，最多俩位小数',
							trigger: 'blur',
						},
						{
							pattern: /^(([1-9]{1}\d{0,7})|(0{1}))(\.\d{0,2})?$/,
							message: '小数点前最多8位数字',
							trigger: 'blur',
						},
					],
					state: [{
						required: true,
						message: '请至少选择一个',
						trigger: 'blur',
					}, ],
				},
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				visible: false,
				canEdit: false,
				dataForm: {
					id: '',
					block: '',
					code: undefined,
					buildingSquare: undefined,
					useSquare: undefined,
					state: 'empty',
					floor: '',
					rentFee: '0',
					remark: undefined,
					buildingSelect: [],
					nameUnit: undefined,
					dateCheckIn: undefined,
					numPopulation: undefined,
					numOld: undefined,
					numPregnant: undefined
				},
				stateOptions: [{
					fullName: '空置',
					id: '空置'
				}, {
					fullName: '已使用',
					id: '已使用'
				}],
				buildings: [],
			};
		},
		// 初始化
		mounted() {
			this.getList();
			this.getareaOptions();
		},
		// 函数集合
		methods: {
			handleChange(value) {
				this.dataForm.block = value[0];
				this.dataForm.building = value[1];
			},
			getareaOptions() {
				selectBuildingBlock().then(res => {
					this.buildings = res.rows;
				});
			},
			// 修改楼
			editProduct(row) {
				var type = "";
				this.canEdit = false;
				if (row.id) {
					// 修改
					type = "edit";
					this.dataForm = row;
					this.editInhibit = true;
				} else {
					// 新增
					type = "add";
					this.dataForm = {};
					this.editInhibit = false;
				}
				this.visible = true;
			},
			// 查看楼详情
			lookProduct(row) {
				this.dataForm = row;
				this.canEdit = true;
				this.visible = true;
			},
			// 删除楼
			delProduct(row) {
				this.$confirm("是否删除？", "提示", {
						confirmButtonText: "确 认",
						cancelButtonText: "取 消"
					})
					.then(() => {
						deleteConfigHouseBlock({
							...row
						}).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success',
									duration: 1000,
									onClose: () => {
										this.visible = false;
										this.getList();
									},
								});
							}
						})
					})
					.catch(() => console.info("操作取消"));

			},
			//提交楼
			submitProduct() {

				var that = this;
				var number = "";
				for (var i = 0; i < that.buildings.length; i++) {
					if (that.buildings[i].id == that.dataForm.block) {
						that.dataForm.building = that.buildings[i].number;
					}
				}
				this.$refs['form'].validate(valid => {
					if (valid) {
						if (this.dataForm.id) {
							editConfigHouseBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.visible = false;
											this.getList();
										},
									});
								}
							})
						} else {
							insertConfigHouseBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.visible = false;
											this.getList();
										},
									});
								}
							})
						}
					}
				})

			},
			//初始化列表
			getList() {
				if(this.queryParams.state == ""){
					delete this.queryParams.state;
				}
				this.loading = false;
				selectConfigHouseBlock({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					this.total = res.total
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					block: null,
					name: null,
					number: null,
				};
				this.resetForm('form');
			},

		}
	}
</script>
<style scoped lang='scss'>
	.centered-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>